<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 定义一个函数来发送Ajax请求
        function ajax(options) {
            // 配置的是默认值
            var defaults = {
                type: 'get',
                url: '',
                data: '',
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function () { },
                error: function () { },
            };
            // 使用 options 对象中的属性覆盖 defaults 对象中的属性
            Object.assign(defaults, options);
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // params 是拼接请求参数的变量
            var params = '';
            // 循环用户传递过来的参数
            for (var attr in defaults.data) {
                // 将参数装换为字符串格式
                params += `${attr}=${defaults.data[attr]}&`
            }
            // 将参数最后面的’&‘截取掉，将截取后的结果重新赋值给 params 变量
            params = params.substr(0, params.length - 1);
            console.log(params);

            // 判断请求方式
            if (defaults.type == 'get') {
                defaults.url = `${defaults.url}?${params}`;
            }
            // console.log(defaults.url)
            // 配置ajax对象
            xhr.open(defaults.type, defaults.url);
            // 如果请求方式为 post
            if (defaults.type == 'post') {
                var contentType = defaults.header['Content-Type'];
                // 设置请求参数格式的类型
                xhr.setRequestHeader('Content-Type', contentType);
                // 判断用户希望的请求参数格式的类型
                // 如果类型为json
                if (contentType == 'application/json') {
                    // 向服务器端传递json数据格式的参数
                    xhr.send(JSON.stringify(defaults.data));
                } else {
                    // 先服务器端传递普通类型的请求参数
                    xhr.send(params);
                }
            } else {
                xhr.send(); // 发送请求
            }
            // 监听 xhr对象下面的onload事件,当xhr对象接收完响应数据后触发
            xhr.onload = function () {
                // xhr.getResponseHeader : 获取响应头中的数据
                var contentType = xhr.getResponseHeader('Content-Type');
                // 服务器端返回的数据
                var responseText = xhr.responseText;
                // 如果响应类型中包含 application/json
                if (contentType.includes('application/json')) {
                    // JSON字符串转换成JSON对象
                    responseText = JSON.parse(responseText);
                }
                // 当 http 状态码为 200 的时候
                if (xhr.status == 200) {
                    // 请求成功，调用请求成功情况的函数
                    defaults.success(responseText, xhr);
                } else {
                    // 请求失败，调用请求失败情况的函数
                    defaults.error(responseText, xhr);
                }
            }
        }
        // 调用了ajax函数，传递了一个实参，这个实参是一个对象
        ajax({
            // 请求方式
            type: 'get',
            // 请求地址
            url: 'http://localhost:3000/responseData',
            data: {
                name: 'zhangsan',
                age: 20
            },
            success: function (data, xhr) {
                // 将请求成功后的结果与一段字符串进行拼接（对响应结果做进一步的处理，封装成函数更方便进行处理
                console.log('这里是success函数:', data);
            },
        })
    </script>
</body>

</html>